<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<!--JSTL  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>课程计划</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a><cite>首页</cite></a> <a><cite>课程计划管理</cite></a>
			<a><cite>课程计划列表</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			href="javascript:location.replace(location.href);" title="刷新"><i
			class="layui-icon" style="line-height: 30px">ဂ</i></a>
	</div>
	<div class="x-body">
		<xblock>
		<button class="layui-btn layui-btn-danger" onclick="delAll()">
			<i class="layui-icon">&#xe640;</i>批量删除
		</button>
		<button class="layui-btn"
			onclick="member_add('添加课程计划','AddCoursePlan.jsp','600','500')">
			<i class="layui-icon">&#xe608;</i>添加
		</button>
		<form style="display: inline-block">
		    <input type="hidden" name="op" value="queryByPage" />
			<div class="layui-input-inline">
				<input type="text" name="teacherNo" value="${teacherNo}" min="1"
					id="teacherNo" placeholder="请输入教员号" autocomplete="off"
					class="layui-input">
			</div>
			<div class="layui-input-inline" style="width: 80px">
				<button  class="layui-btn" lay-submit="" lay-filter="">
					<i class="layui-icon">&#xe615;</i>
				</button>
			</div>
		</form>
		<span class="x-right" style="line-height: 40px">共有数据：<span
			class="layui-badge" id="count">${pd.totalCount}</span> 条
		</span></xblock>
		<table class="layui-table">
			<thead>
				<tr>
					<th><input type="checkbox" id="all" name="" value=""></th>
					<th>计划课程编号</th>
					<th>课程名</th>
					<th>教员号</th>
					<th>教员名</th>
					<th>开始时间</th>
					<th>结束时间</th>
					<th>上课人数</th>
					<th>上课地点</th>
					<th>上课时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="x-img">
			<!-- 如果属性范围内的pd为null，我们就跳转到CourseServlet去获取数据，然后再转发回来 -->
				<c:if test="${pd==null}">
					<!-- c:redirect 跳转到 CourseServlet -->
					<c:redirect url="CoursePlanServlet?op=queryByPage"></c:redirect>
				</c:if>
				<!-- 如果 范围内的list不为空，遍历数据并展示结果 -->
				<c:if test="${pd!=null}">
					<c:forEach items="${pd.data}" var="cp">
						<tr>
							<td><input type="checkbox" value="1" name="" class="c"></td>
							<td>${cp.cpNo}</td>
							<td>${cp.courseName}</td>
							<td>${cp.teacherNo}</td> 
							<td>${cp.teacherName}</td> 
							<td>${cp.courseStart}</td>
							<td>${cp.courseEnd}</td>
			                <td>${cp.courseNum}</td>
			                <td>${cp.coursePlace}</td>
			                <td>${cp.courseTime}</td>
			                <c:if test="${cp.courseStatus==1}">
					        <td>招募中</td>
				            </c:if>
				            <c:if test="${cp.courseStatus==2}">
					        <td>开课中</td>
				            </c:if>
				            <c:if test="${cp.courseStatus==3}">
					        <td>已结课</td>
				            </c:if>
				            <c:if test="${cp.courseStatus==4}">
					        <td>已取消</td>
				            </c:if>
				            <c:if test="${cp.courseStatus==5}">
					        <td>已满员</td>
				            </c:if>
							<td class="td-manage">
							<a title="编辑" href="javascript:;" onclick="member_edit('编辑','UpdCoursePlan.jsp?cpNo=${cp.cpNo}&courseNo=${cp.courseNo}&courseStart=${cp.courseStart}&courseEnd=${cp.courseEnd}&teacherNo=${cp.teacherNo}&courseNum=${cp.courseNum}&coursePlace=${cp.coursePlace}&courseTime=${cp.courseTime}&courseStatus=${cp.courseStatus}','4','','510')"
								class="ml-5" style="text-decoration: none"> <i class="layui-icon">&#xe642;</i>
							</a> 
							<a title="删除" href="javascript:;" onclick="member_del(this,${cp.cpNo})"
								style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
							</a>
							</td>
						</tr>
					</c:forEach>
				</c:if>
				
			</tbody>
		</table>
		
		<div id="page" style="text-align: center"></div>
		
	</div>
	<script src="./lib/layui/layui.js" charset="utf-8"></script>
	<script src="layui/layui.js" charset="utf-8"></script>
	<script src="./js/x-layui.js" charset="utf-8"></script>
	<script src="js/jquery-2.0.3.js"></script>
	<script>
			//全选
			$("#all").click(function() {
				var a = $(this).prop("checked");
				//prop() 方法设置或返回被选元素的属性和值。
				$(".c").prop("checked", a);
			});

			//若有一个没选，则取消全选
			$(".c").click(function() {
				$("#all").prop("checked", $(".c").length == $(".c").filter(":checked").length ? true : false);
			});
					
	</script>
	<script>
		layui.use(['laypage', 'layer' ], function() {
			$ = layui.jquery; //jquery
			laypage = layui.laypage; //分页
			layer = layui.layer; //弹出层

			//分页导航
			//分页导航
			laypage.render({
				elem : 'page',    
				count : ${pd.totalCount},
				curr: ${pd.page},
				limit: ${pd.pageSize},
				theme: 'lightblue',	
				layout : [ 'prev', 'page', 'next' ],
				jump: function(obj, first){
			        //首次不执行
			        if(!first){
			        	//跳转到Servlet 传递参数：page当前页数、 pageSize每页显示记录数
			        	location.href="CoursePlanServlet?op=queryByPage&page="+obj.curr+"&teacherNo="+$("#teacherNo").val();
			        }
			    }
			});
		});

		/*批量删除*/
		function delAll(){
			layer.confirm('确认要删除吗？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				  var i=0;
				  $(".c").each(function(){
					   //获得当前复选框状态
			           if( $(this).prop("checked")){
			        	   //删除
			        	   i++;
			    	       member_del_1(this,i);
			           }
		          });
				  layer.msg('成功删除了'+i+'条记录', {
						icon : 6,
						time : 2000
					}, function() {
						window.location.reload();
				  });	 
		      });
		}
		
		//删除单个
		function member_del_1(obj,i) {
	        $.ajax({
		         url : "CoursePlanServlet",//提交地址
		         type : "get",//提交请求类型
		         data : {//提交给servlet的数据
			     cpNo:$(obj).parent().next("td").text(),
			     op:"del"
		         },
		         success : function(data) {//提交成功后的回调函数
			      if(data.code== 1 ){
				      //发异步删除数据
				      $(obj).parents("td").parents("tr").remove();
				      //异步更新总记录数
				      var c= parseInt($("#count").text())-1;
				      $("#count").text(c+"");
				      console.log($(obj).parent().next("td").text());
			       }else{
				      layer.msg('删除失败!', {
					  icon : 1,
					  time : 2000
				      });
			       }
		           },
		           dataType : "json"//预期返回的数据类型
	    });	
		}
		/*用户-添加*/
		function member_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		
		/*用户-编辑*/ 
		function member_edit(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}
		
		/*用户-删除*/
		function member_del(obj,cpNo) {
			layer.confirm('确认要删除吗？', {
				icon : 3,
				title : '提示信息'
			}, function(index) {
				$.ajax({
					url : "CoursePlanServlet",//提交地址
					type : "get",//提交请求类型
					data : {//提交给servlet的数据
						cpNo:cpNo,
						op:"del"
					},
					success : function(data) {//提交成功后的回调函数
						if(data.code == 1){
							//发异步删除数据
							$(obj).parents("tr").remove();
			                //异步更新总记录数
							var c= parseInt($("#count").text())-1;
							$("#count").text(c+"");				
							layer.msg('已删除！', {
								icon : 6,
								time : 1000
							}, function() {
								window.location.reload();
						  });
						}else{
							layer.msg('删除失败!', {
								icon : 1,
								time : 1000
							});
						}
					},
					dataType : "json"//预期返回的数据类型
				});				
			});
		}
	</script>
</body>
</html>
